<p align="center">
	<b>Total amount for #$request.transcationTag :</b>
	$request.transcationTagTotal
</p>
<div id="expenses_display_table"></div>
<div align="center">
<a style="color: gray;" href="#" onClick="previous()">&lsaquo;&lsaquo; Prev 10</a>
&nbsp;<b>1-10</b>&nbsp;  
<a style="color: gray;" href="#" onClick="next()">Next 10 &rsaquo;&rsaquo;</a>
</div>

<script type='text/javascript'>
	google.load('visualization', '1', {	packages : [ 'table' ] });
	google.setOnLoadCallback(drawTable);
	function drawTable() {
		\$.post('json/expensesForTag.groovy',
			{	
				expensesTag : '$request.transcationTag',
				offset      : 0,
				limit       : 10
			},
			function(data) {
				var jsondata = new google.visualization.DataTable(data);
				var container = document.getElementById('expenses_display_table');
				var table = new google.visualization.Table(container);
				table.draw(jsondata, { showRowNumber : true});
			}
		);
	};
	
	function previous() {
		\$.post('json/expensesForTag.groovy',
			{	
				expensesTag : '$request.transcationTag',
				offset      : 10,
				limit       : 10
			},
			function(data) {
				var jsondata = new google.visualization.DataTable(data);
				var container = document.getElementById('expenses_display_table');
				var table = new google.visualization.Table(container);
				table.draw(jsondata, { showRowNumber : true });
			}
		);
	};
	function next() {
		\$.post('json/expensesForTag.groovy',
			{	
				expensesTag : '$request.transcationTag',
				offset      : 10,
				limit       : 10
			},
			function(data) {
				var jsondata = new google.visualization.DataTable(data);
				var container = document.getElementById('expenses_display_table');
				var table = new google.visualization.Table(container);
				table.draw(jsondata, { showRowNumber : true });
			}
		);
	};
</script>

